import { PropType, computed, defineComponent } from 'vue';
import { useNamespace } from '@ibiz-template/vue3-util';
import './grid-setting.scss';
import { GridController, IColumnState } from '@ibiz-template/runtime';
import draggable from 'vuedraggable';
import { showTitle } from '@ibiz-template/core';

export const IBizGridSetting = defineComponent({
  name: 'IBizGridSetting',
  components: {
    draggable,
  },
  props: {
    columnStates: {
      type: Array as PropType<IColumnState[]>,
      required: true,
    },
    controller: {
      type: Object as PropType<GridController>,
      required: true,
    },
  },
  setup(props) {
    const ns = useNamespace('grid-setting');

    const c = props.controller;

    const dragColumnStates = computed(() => {
      return props.columnStates.map(item => {
        return {
          ...item,
        };
      });
    });

    const isDraggable = computed(() => {
      return !!c.controlParams.enablecolumnsort;
    });

    // 点击后控制显隐
    const handleClick = (dragColumnState: IColumnState) => {
      const columnState = c.state.columnStates.find(state => {
        return state.key === dragColumnState.key;
      });
      if (columnState) {
        c.setColumnVisible(columnState);
      }
    };

    // 拖拽变化后
    const onDragChange = async (evt: IData) => {
      if (evt.moved) {
        const newIndex = evt.moved.newIndex;
        const oldIndex = evt.moved.oldIndex;
        const movedDragColumnState = evt.moved.element;
        c.changeColumnStateSort(movedDragColumnState.key, newIndex, oldIndex);
      }
    };

    return {
      ns,
      c,
      dragColumnStates,
      isDraggable,
      handleClick,
      onDragChange,
    };
  },
  render() {
    return (
      <el-popover placement='right-start' trigger='click' width='auto'>
        {{
          reference: () => {
            return (
              <ion-icon
                name='options-outline'
                class={this.ns.b('set-icon')}
                title={showTitle(
                  ibiz.i18n.t('component.gridSetting.hideControl'),
                )}
              ></ion-icon>
            );
          },
          default: () => {
            return (
              <draggable
                class={this.ns.b('column-states')}
                v-model={this.dragColumnStates}
                group={this.c.model.id}
                itemKey='key'
                sort={this.isDraggable}
                force-fallback={true}
                animation={500}
                ghost-class={this.ns.b('column-state-ghost')}
                filter='.unmover'
                onChange={(evt: IData) => this.onDragChange(evt)}
              >
                {{
                  item: ({ element: state }: { element: IColumnState }) => {
                    return (
                      <div
                        class={[
                          this.ns.b('column-state'),
                          this.ns.is('disabled', state.hidden),
                          this.ns.is('fixed', !!state.fixed),
                          !!state.fixed && 'unmover',
                        ]}
                        onClick={() => this.handleClick(state)}
                      >
                        {this.isDraggable && !state.fixed && (
                          <iBizIcon
                            class={this.ns.b('drag-icon')}
                            icon={{
                              imagePath: 'svg/drag.svg',
                            }}
                            baseDir='iconfont'
                          />
                        )}
                        <iBizIcon
                          class={this.ns.b('disable-icon')}
                          icon={{
                            imagePath: 'svg/disable.svg',
                          }}
                          baseDir='iconfont'
                        />
                        <iBizIcon
                          class={this.ns.b('enable-icon')}
                          icon={{
                            imagePath: 'svg/enable.svg',
                          }}
                          baseDir='iconfont'
                        />
                        <div class={this.ns.b('state-caption')}>
                          {state.caption}
                        </div>
                      </div>
                    );
                  },
                }}
              </draggable>
            );
          },
        }}
      </el-popover>
    );
  },
});
